<template>
  <div class="develop">
    <div class="title">基本密钥</div>
    <el-form label-position="right" label-width="120px">
      <el-form-item label="Test Secret Key">
        <el-tooltip content="Test模式商户私钥" placement="top-start">
          <i class="el-icon-warning"></i>
        </el-tooltip>
        <el-input
          placeholder="sk_test_DuffDOOSafbDfPmXbP10G004"
          v-model="info.apiTestSecret"
          style="width: 745px"
          disabled
        ></el-input>
        <el-button class="change" @click="openChange(1)">重置</el-button>
      </el-form-item>
      <el-form-item label="Live Secret Key">
        <el-tooltip content="Live模式商户私钥" placement="top-start">
          <i class="el-icon-warning"></i>
        </el-tooltip>
        <el-input
          placeholder="sk_test_DuffDOOSafbDfPmXbP10G004"
          v-model="info.apiLiveSecret"
          style="width: 745px"
          disabled
        ></el-input>
        <el-button class="change" @click="openChange(2)">重置</el-button>
      </el-form-item>
      <el-form-item label="云尘付公钥">
        <el-tooltip
          content="云尘付平台回调通知商户服务端的验签公钥"
          placement="top-start"
        >
          <i class="el-icon-warning _posi"></i>
        </el-tooltip>
        <el-input
          placeholder="sk_test_DuffDOOSafbDfPmXbP10G004"
          disabled
          :rows="8"
          type="textarea"
          v-model="info.publicKey"
          style="width: 745px"
        ></el-input>
        <span class="change">
          <!-- <el-button @click="resetKey" class="width120">重置</el-button> -->
          <!-- <el-button type="primary" class="width120" @click="saveKey">保存</el-button> -->
        </span>
      </el-form-item>
      <el-form-item label="商户RSA公钥">
        <el-tooltip
          content="商户服务端调用云尘付平台的验签公钥"
          placement="top-start"
        >
          <i class="el-icon-warning _posi"></i>
        </el-tooltip>
        <el-input
          placeholder="请输入内容"
          :rows="8"
          type="textarea"
          v-model="info.merchantPublicKey"
          style="width: 745px"
          disabled
        ></el-input>
        <el-button class="change" @click="openChange(3)">编辑</el-button>
      </el-form-item>

      <!-- <el-form-item label="">
        <el-button
          type="primary"
          class="width120"
          @click="saveKey"
          style="margin: 20px 0 20px 38px"
          >保存</el-button
        >
      </el-form-item> -->
    </el-form>
    <div class="addBox">
      <div class="title ipText">
        IP &nbsp;
        <el-tooltip
          content="仅IP白名单内的商户服务端可成功向云尘付平台发起请求"
          placement="top-start"
        >
          <i class="el-icon-warning" style="top: 0px"></i>
        </el-tooltip>
      </div>
      <div>
        <el-button
          type="primary"
          @click="
          addWhiteList()"
          style="width: 180px"
          >添加白名单</el-button
        >
      </div>
    </div>
    <el-table :data="dataList">
      <template slot="empty">
        <el-empty
          :image="require('@/assets/imgs/middleWork/k1.png')"
          :image-size="80"
          description="暂无相关数据"
        ></el-empty>
      </template>
      <el-table-column
        show-overflow-tooltip
        prop="ipAddress"
        align="center"
        label="IP地址"
      >
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="gmtCreated"
        align="center"
        label="添加时间"
      >
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="act"
        align="center"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button @click="codeDelFn(scope.row.id)" type="text"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      class="addDialog"
      title=""
      :visible.sync="addDialog"
      width="449px"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div class="dialogTitle">添加白名单</div>
      <el-form
        label-position="top"
        :rules="rules"
        ref="ipForm"
        :model="ipForm"
        @submit.native.prevent
      >
        <el-form-item label="IP地址" prop="ipAddress">
          <el-input
            v-model="ipForm.ipAddress"
            maxlength="50"
            placeholder="输入IP地址"
            autocomplete="off"
            @keyup.enter.native="handleAdd('ipForm')"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false" class="width120">取消</el-button>
        <el-button type="primary" class="width120" @click="handleAdd('ipForm')"
          >确定</el-button
        >
      </div>
    </el-dialog>

    <!-- 开发参数 -->
    <el-dialog
      class="cardDialog"
      :show-close="false"
      :visible="paramDialog"
      label-width="130px"
      label-position="top"
      width="449px"
    >
      <div class="addTitle mb20">
        <span>确认</span>
      </div>
      <div class="tip tip1" v-if="paramType !== 3">
        你即将获得一个新的
        {{
          paramType == 1 ? "Test Secret Key" : "Live Secret Key"
        }}，并且只能用新的
        {{ paramType == 1 ? "Test Secret Key" : "Live Secret Key" }}
        进行支付。
      </div>
      <el-form v-else ref="form4" :rules="rule4" :model="form4">
        <el-form-item prop="merchantPublicKey" label="上传商户 RSA 公钥">
          <el-input
            placeholder="商户 RSA 公钥"
            :rows="6"
            maxlength="1024"
            type="textarea"
            v-model="form4.merchantPublicKey"
          ></el-input>
        </el-form-item>
        <div class="tip tip1">
          上传公钥后，请配置 RSA 私钥到你的代码里。如果已经配置好，请忽略。
        </div>
        <div class="tip tip1">
          <span
            style="color: #03bfc6; cursor: pointer"
            @click="goSearch('如何生成RSA公私钥对')"
            >如何生成 RSA 公私钥对？</span
          ><br />
          <span
            style="color: #03bfc6; cursor: pointer"
            @click="goSearch('如何配置RSA公私钥对')"
            >如何配置 RSA 公私钥对？</span
          >
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cencelReset3" class="width120">取消</el-button>
        <el-button type="primary" @click="handleSubmit3" class="width120"
          >提交</el-button
        >
      </div>
    </el-dialog>
    <codeDialogVue
      codeId="1"
      :type="codeType"
      :codeDialog.sync="codeDialog"
      @codeState="codeStateFn"
    />
  </div>
</template>

<script>
import codeDialogVue from "@/components/codeDialog.vue";
import { getUserInfo} from "@/utils/public";
import cObj from "@/utils/config";
export default {
  name: "developParams",
  components: {
    codeDialogVue,
  },
  data() {
    const validateIP = (rule, value, callback) => {
      if (value === "" || typeof value === "undefined" || value == null) {
        callback(new Error("请输入正确的IP地址"));
      } else {
        const reg =
          /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
        if (!reg.test(value) && value !== "") {
          callback(new Error("请输入正确的IP地址"));
        } else {
          callback();
        }
      }
    };
    return {
      codeItem: null,
      codeType: "",
      codeDialog: false,
      paramDialog: false,
      form4: {
        merchantPublicKey: "",
      },
      rule4: {
        merchantPublicKey: [
          { required: true, message: "请输入公钥", trigger: "change" },
        ],
      },
      paramType: 1,

      form: {},
      info: {},
      ipForm: {
        ipAddress: "",
      },
      dataList: [],
      addDialog: false,
      rules: {
        ipAddress: [
          {
            required: true,
            message: "请输入正确的IP地址",
            validator: validateIP,
            trigger: "blur",
          },
          {
            pattern: /^(?!\s+).*(?<!\s)$/,
            message: "格式有误",
            trigger: "change",
          },
        ],
      },
    };
  },
  created() {
    // this.$http.get("/api/developparam/getMainMerchant").then((res) => {
    //   if (res.code === "0000") {
    //     this.info = res.data || {};
    //   }
    // });
    this.getParamsInfo();
    this.getIpList();
  },
  methods: {
    getUserInfo,
    codeStateFn(val) {
      if (val) {
        if (
          this.codeType == "SMS_BUSINESS_EDIT_TEST_SECRET_KEY" ||
          this.codeType == "SMS_BUSINESS_EDIT_LIVE_SECRET_KEY" ||
          this.codeType == "SMS_BUSINESS_EDIT_MERCHANT_RSA_PUBLIC_KEY"
        ) {
          this.paramDialog = true;
        } else if (this.codeType == "SMS_BUSINESS_ADD_IP_WHITE") {
          this.addDialog = true;
          this.ipForm.ipAddress = "";
        } else if (this.codeType == "SMS_BUSINESS_DELETE_IP_WHITE") {
          this.handleDeleteIp(this.codeItem);
        }
      }
    },
    goSearch(val) {
      window.open(`${cObj.websiteUrl}helpResult?issue=${val}`);
    },
    // 获取开发参数列表
    getParamsInfo() {
      // var params = new FormData();
      // params.append("verificationCodeEnum", this.type);
      let params = {};
      this.$http
        .post("/api/developparam/listMerchantSecret", params)
        .then((res) => {
          if (res.code === "0000") {
            //console.log(res.data);
            this.info = res.data || {};
            this.form4.merchantPublicKey = res.data.merchantPublicKey;
          }
        });
    },
    handleSubmit3() {
      // var params = new FormData();
      let params = {};
      if (this.paramType == 1) {
        // params.append("verificationCodeEnum", this.type);
        params = {
        };
        this.$http
          .post("/api/developparam/updateTestSecret", params)
          .then((res) => {
            if (res.code === "0000") {
              this.cencelReset3();
              this.$message.success(res.msg);
              this.getParamsInfo();
            }
          });
      } else if (this.paramType == 2) {
        // var params1 = new FormData();
        // params.append("verificationCodeEnum", this.type);
        params = {
        };
        this.$http
          .post("/api/developparam/updateLiveSecret", params)
          .then((res) => {
            if (res.code === "0000") {
              this.cencelReset3();
              this.$message.success(res.msg);
              this.getParamsInfo();
            }
          });
      } else {
        this.$refs.form4.validate((valid) => {
          if (valid) {
            // var params = new FormData();
            // params.append("secret", this.form4.merchantPublicKey);
            params = {
              secret: this.form4.merchantPublicKey,
            };
            this.$http
              .post("/api/developparam/updateMerchantPublicKey", params)
              .then((res) => {
                if (res.code === "0000") {
                  this.cencelReset3();
                  this.$message.success(res.msg);
                  this.getParamsInfo();
                }
              });
          } else {
            return false;
          }
        });
      }
    },
    cencelReset3() {
      this.paramType = 1;
      this.paramDialog = false;
    },
    //修改开发参数
    openChange(type) {
      if(getUserInfo().checkFlag){
        this.paramType = type;
        this.paramDialog = true;
        }else{
          this.paramType = type;
      this.codeDialog = true;
      if (type == 1) {
        this.codeType = "SMS_BUSINESS_EDIT_TEST_SECRET_KEY";
      } else if (type == 2) {
        this.codeType = "SMS_BUSINESS_EDIT_LIVE_SECRET_KEY";
      } else if (type == 3) {
        this.codeType = "SMS_BUSINESS_EDIT_MERCHANT_RSA_PUBLIC_KEY";
      }
        }

    },
    addWhiteList(){
      if(getUserInfo().checkFlag){
        this.addDialog = true;
          this.ipForm.ipAddress = "";
        }else{
          this.codeDialog = true;
          this.codeType = 'SMS_BUSINESS_ADD_IP_WHITE';
        }
    },
    getIpList() {
      this.$http.get("/api/developparam/whiteIp/list").then((res) => {
        if (res.code === "0000") {
          this.dataList = res.data;
        }
      });
    },
    resetKey() {
      this.$http.get("/api/developparam/createPublicKey").then((res) => {
        this.info = {
          ...this.info,
          ...res.data,
        };
      });
    },
    saveKey() {
      this.$http.put("/api/developparam/saveKey", this.info).then(() => {
        this.$message.success("保存成功！");
      });
    },
    handleAdd(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http
            .post("/api/developparam/whiteIp/save", {
              ipAddress: this.ipForm.ipAddress,
            })
            .then((res) => {
              if (res.code === "0000") {
                this.$message.success("添加成功!");
                this.addDialog = false;
                this.getIpList();
              }
            });
        } else {
          return false;
        }
      });
    },
    codeDelFn(id) {
      if(getUserInfo().checkFlag){
        this.handleDeleteIp(id);
        }else{
          this.codeItem = id;
      this.codeDialog = true;
      this.codeType = "SMS_BUSINESS_DELETE_IP_WHITE";
        }
    },
    handleDeleteIp(id) {
      this.$http
        .delete("/api/developparam/whiteIp/delete", {
          params: {
            id,
          },
        })
        .then((res) => {
          if (res.code === "0000") {
            this.$message.success("删除成功!");
            this.getIpList();
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.cardDialog {
  .addTitle {
    width: 160px;
    height: 24px;
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    line-height: 24px;
    margin-bottom: 40px;
  }
  .tip {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
    margin-top: 12px;
    margin-bottom: 30px;
    &.tip1 {
      margin-bottom: 12px;
    }
    a {
      text-decoration: none;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #869daa;
    }
  }
  :deep(.el-dialog) {
    border-radius: 16px;
    background: transparent !important;
    box-shadow: none !important;
  }
  :deep(.el-dialog__body) {
    padding: 41px 40px;
    background: #fff;
    border-radius: 16px;
    padding-bottom: 148px;
    margin-bottom: -82px;
  }
  :deep(.dialog-footer) {
    margin-right: 22px;
  }
  :deep(.el-form-item__content) {
    position: relative;
  }
  .form-img {
    width: 22px;
    border-radius: 22px;
    position: absolute;
    top: 5px;
    left: 10px;
    z-index: 1;
  }
}

.develop {
  min-height: calc(100vh - 120px);
  background: #fff;
  padding: 34px 30px 0 34px;
  min-width: 1200px;
  .title {
    color: #4f595f;
    position: relative;
    font-size: 20px;
    font-weight: 600;
    line-height: 34px;
    margin-bottom: 34px;
    &::before {
      content: "";
      width: 4px;
      height: 24px;
      background: #03bfc6;
      position: absolute;
      left: -34px;
      top: 5px;
    }
  }
  .el-icon-warning {
    color: #869daa;
    margin-right: 20px;
    font-size: 18px;
    position: relative;
    top: 3px;
  }
  ._posi {
    position: relative;
    top: -134px;
  }
  ._posi1 {
    position: relative;
    top: -133px;
  }
  .change {
    width: 120px;
    margin-left: 20px;
  }
  .ipText {
    margin-bottom: 20px;
  }
  .addBox {
    display: flex;
    justify-content: space-between;
  }
}
</style>
